<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员系统</title>
    <!--外观-->
    <link rel="stylesheet" th:href="@{/admin/css/adminlte.min.css}">
    <!--字体图标-->
    <link rel="stylesheet" th:href="@{/admin/css/all.css}">
    <!-- 左侧滚动条 -->
    <link rel="stylesheet" th:href="@{/admin/css/OverlayScrollbars.min.css}">
    <!-- 表格 -->
    <link rel="stylesheet" th:href="@{/admin/css/ui.jqgrid-bootstrap4.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/bootstrap.css}"/>
    <!-- Toastr -->
    <link rel="stylesheet" th:href="@{/admin/css/toastr.min.css}">
    <style>
        /* 获得列名的class名，直接给它居中 */
        .ui-th-column {
            text-align: center;
        }
        /* 负责对齐的，必用 */
        .main-box {
            padding-left: 7px;
            padding-right: 7px;
        }
        /* 功能名称 */
        .main-title {
            margin-bottom: 0;
        }
        /* 下面是按钮的 */
        .button-operation {
            margin-bottom: 10px;
            display: flex;
        }

        .main-button {
            width: 9%;
        }
    </style>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!--引入头框-->
    <div th:replace="pc/admin/header::header-nav"></div>
    <!-- 引入工具栏sidebar-fragment -->
    <!--括号内的值为${path}，用于高亮框-->
    <div th:replace="pc/admin/sidebar::sidebar-fragment('pet_categories')"></div>

    <div class="content-wrapper">
        <section class="content-header">
        </section>
        <!-- Main content -->
        <div class="content">
            <div class="container-fluid main-box">
                <div class="card card-primary ">
                    <div class="card-header">
                        <h3 class="card-title main-title">分类管理</h3>
                    </div>
                    <div class="card-body">
                        <div class="button-operation">
                            <button type="button" class="btn btn-success main-button"
                                    data-toggle="modal" data-target="#modal-add">
                                <i class="nav-icon fa fa-plus"></i>
                                增加
                            </button>
                            &nbsp;
                            <button type="button" class="btn btn-info main-button"
                                    id="edit">
                                <i class="nav-icon fa fa-keyboard"></i>
                                编辑
                            </button>
                            &nbsp;
                            <!-- 删除后数据库不删记录，早期帖子会有该分类进行对应 -->
                            <button type="button" class="btn btn-danger main-button"
                                    data-toggle="modal" data-target="#modal-danger">
                                <i class="nav-icon fa fa-minus"></i>
                                删除
                            </button>
                            &nbsp;
                            <button type="button" class="btn btn-default main-button" id="previousCategory">
                                <i class="nav-icon fa fa-angle-double-left"></i>
                                上级分类
                            </button>
                            &nbsp;
                            <button type="button" class="btn btn-default main-button" id="nextCategory">
                                <i class="nav-icon fa fa-angle-double-right"></i>
                                下级分类
                            </button>

                        </div>
                        <table id="jqGrid" class="table table-bordered"></table>
                        <div id="jqGridPager"></div>

                        <!-- 增加弹框 -->
                        <div class="modal fade" id="modal-add">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">增加分类</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <label for="newCategoryName">新分类名称:</label>
                                        <input type="text" class="form-control" id="newCategoryName" placeholder="请输入分类名称">
                                    </div>
                                    <div class="modal-footer justify-content-between">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" data-dismiss="modal" id="save">确认</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- 编辑弹框 -->
                        <div class="modal fade" id="modal-edit">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">编辑分类</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <label for="editCategoryName">分类名称:</label>
                                        <input type="text" class="form-control" id="editCategoryName">
                                    </div>
                                    <div class="modal-footer justify-content-between">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" data-dismiss="modal" id="editConfirm">确认</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- 删除弹框 -->
                        <div class="modal fade" id="modal-danger">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content bg-danger">
                                    <div class="modal-header">
                                        <h4 class="modal-title">删除分类</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>确定&quot;删除&quot;这些分类吗？（子分类也会删除）</p>
                                    </div>
                                    <div class="modal-footer justify-content-between">
                                        <button type="button" class="btn btn-outline-light" data-dismiss="modal">
                                            取消
                                        </button>
                                        <button type="button" class="btn btn-outline-light" data-dismiss="modal" id="delete">
                                            确认
                                        </button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                    </div><!-- /.card-body -->
                </div><!-- /.container-fluid -->
            </div>
        </div>
    </div>
</div>
<!-- jQuery -->
<script th:src="@{/admin/js/jquery.min.js}"></script>
<!-- overlayScrollbars -->
<script th:src="@{/admin/js/jquery.overlayScrollbars.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/admin/js/adminlte.js}"></script>
<!-- jqgrid -->
<script th:src="@{/admin/js/jquery.jqGrid.min.js}"></script>
<script th:src="@{/admin/js/grid.locale-cn.js}"></script>
<!-- Toastr -->
<script th:src="@{/admin/js/toastr.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/js/bootstrap.bundle.min.js}"></script>
<!-- 自写 -->
<script th:src="@{/admin/js/public.js}"></script>
<script th:src="@{/admin/js/pet_categories.js}"></script>
</body>
</html>